<template>
    <div class="single-pie">
        <div class="title">
            {{ title }}
        </div>
        <div class="pie">
            <div class="chart">
                <Pie :data="data" />
            </div>
            <div>
                <div class="sub-title">
                    {{ subTitle }}
                </div>
                <div class="value">
                    {{ toFixedTwo(radio) || 0 }}%
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts"  setup>
import { toRefs } from 'vue';
import Pie from '../Pie.vue';
import { computed } from 'vue';
import type { DataItem } from '../../onePage.module';
import {toFixedTwo} from '../../../../utils';

const props = defineProps<{
    title: string,
    subTitle: string,
    data: DataItem[],
}>();
const { title, subTitle, data } = toRefs(props);

const radio = computed(() => {
    if (data.value && data.value.length) {
        return data.value[0].value;
    }
    return 0;
});

</script>

<style lang="scss" scoped>
.single-pie {
    width: 50%;
    display: inline-block;
    box-sizing: border-box;
    margin-bottom: 30px;

    .title {
        font-family: PingFangSC-Medium, sans-serif;
        font-weight: 600;
        font-size: 14px;
        color: #181819;
    }

    .pie {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 10px;

        .chart {
            margin-right: 16px;
        }

        .sub-title {
            font-family: PingFangSC-Regular, sans-serif;
            font-weight: 400;
            font-size: 12px;
            color: #999999;
        }

        .value {
            font-family: PingFangSC-Medium, sans-serif;
            font-weight: 600;
            font-size: 14px;
            color: #181819;
            margin-top: 4px;
        }
    }
}
</style>
